<template>
  <div class="channel">
    <div
      v-for="item in channel"
      :key="item.id"
      class="item"
      @click="skip(item.id)"
    >
      <img :src="item.iconUrl" />
      <span>{{ item.name }}</span>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

defineProps(['channel'])

//每个小分类跳转
const skip = (id) => {
  router.push({
    name: 'category',
    query: { id }
  })
}
</script>

<style scoped>
.channel {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
  padding: 16px;
  background-color: #fff;
  /* border: 1px solid #000; */
}
.item {
  display: flex;
  flex-direction: column;
}
img {
  width: 50%;
  /* object-fit: cover; */
}
</style>
